<template>
	<s-layout title="邀请" navbar="inner1" :bgStyle="{ color: '#fff' }" :onShareAppMessage="{
		title: '邀请好友加入',
		path: '/pages/index/home?invite_code=' + state.invite_code,
		image:
			'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/KP/20250412/8e52aea8163bb0dc5e6c7552e11d35fd.png',
	}">
		<ass-navbar title="邀请" />
		<su-sticky>
			<su-tabs :current="state.currentTab" :list="state.tabs" lineColor="#0559a7" inactiveStyle="color:#9E9E9E"
				activeStyle="color:#000000;font-weight: 600;" :scrollable="false" borderNode @change="onTabsChange" />
		</su-sticky>

		<div v-if="state.currentTab == 0" class="box_type">
			<div class="qr_code">
				<div class="qr_text ss-flex" v-if="state.invite_code">
					{{ state.invite_code }}
					<button class="ss-reset-button" @tap="copyCode">
						<image style="width:28rpx;height:32rpx" class='ss-m-l-20' :src="sheep.$url.cdn('/storage/sjrz/20250412/18de9de6dbf7c095e2ea7f04a2f29287.png')" />
					</button>
				
				</div>
				<image class="qr_code_img" :src="state.qr_code" mode="widthFix" />
				<image class="bgi"
					src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/KP/20250412/de9a85771d24d0f4ba774822b1e63625.png"
					mode="widthFix" />
			</div>

			<!-- 固定在底部的按钮 -->
			<view class="fixed-bottom-btn">
				<view class="btn-container ss-safe-bottom">
					<view class="share-btn" @click="show_bind"> 手动绑定 </view>
					<view class="share-btn" @click="scan_code"> 扫码绑定 </view>
					<view class="share-btn" @click="show_share">邀请好友</view>
				</view>
			</view>
		</div>

		<div v-if="state.currentTab == 1" class="box_type">
			<!-- 邀请记录列表 start -->
			<div class="invite_container">
				<!-- 搜索 筛选 -->
				<div class="search_filter">
					<div class="search_box">
						<image class="search_icon" src="@/icon/search.png" mode="aspectFit"></image>
						<input type="text" v-model="state.search_key" placeholder="搜索用户名称" class="search_input" />
						<div class="search_btn" @click="handleSearch">搜索</div>
					</div>

					<div class="date_filter">
						<uni-datetime-picker v-model="state.dateRange" type="daterange" @change="onDateChange">
							<image class="calendar_icon"
								src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/img/rl.png"
								mode="aspectFit"></image>
						</uni-datetime-picker>
					</div>
				</div>
				<!-- 邀请记录   state.user_list.length-state.total -->
				<div class="invite_header">邀请记录 ({{ state.total }})人</div>

				<div class="invite_list">
					<div class="invite_item" v-for="(item, index) in state.user_list" :key="index">
						<div class="user_left">
							<div class="avatar_box">
								<image :src="item.avatar" mode="aspectFill"></image>
							</div>
							<div class="user_detail">
								<div class="user_name">{{ item.nickname }}</div>
								<div class="invite_time">邀请时间: {{ item.create_time }}</div>
								<div class="invite_time">绑定手机号: {{ item.mobile }}</div>
							</div>
						</div>
						<div class="user_tag">{{ item.role }}</div>
					</div>
				</div>
			</div>
			<!-- 邀请记录列表 end -->
		</div>






		<view class="main" v-if="state.currentTab == 3">
			<view class="charts-box" @touchstart.native.prevent="touchstartCallback"
				@touchmove.native.prevent="touchmoveCallback" @touchend.native.prevent="touchendCallback"
				:style="'transform: translate(' + state.stv.offsetX*2 + 'rpx, ' + state.stv.offsetY*2 + 'rpx) scale(' + state.stv.scale + ')'">
				<!-- tooltipFormat="tooltipFun" -->
				<qiun-data-charts type="map" style="width:1000rpx" :canvas2d="true" :opts="config" canvasId="mapma"
					:chartData="state.chartsDataMap" />
			</view>

			<su-fixed bottom :isInset="false">
				<view class="" style="float:right;margin-top:-250rpx;margin-right:20rpx">
					<template v-for="(item,index) in btnList" :key="index">
						<button @tap="changeBtn(item)" :class="{'btn-act':state.btnIndex==item.value}"
							class="ss-reset-button btn">{{item.name}}</button>
					</template>

				</view>
				<view class="box-bottom">
					<view class="ss-flex ss-m-b-26 justify-between align-start ss-p-x-30">
						<view class="ss-flex-wrap">
							中国<text v-for="(item,index) in state.cityName" :key="index">/{{item}}</text>
						</view>
						<view style="color:#9E9E9E;flex-shrink:0" v-if="state.level!=0" @tap="back">返回上级</view>
					</view>
					<scroll-view class="scroll-view" :scroll-y="true" style="">
						<view class="scroll-box">
							<view @tap="nextArea(item)" v-for="(item,index) in state.allList[state.level]"
								:key="item.id" class="scroll-item ss-flex justify-between">
								<!-- <span v-if="state.level!=2">（0/{{item.children.length}}）</span> -->
								<view>{{item.name}}<span
										v-if="state.level!=3">（{{item.signed_count}}/{{item.unsigned_count}}）</span>
								</view>
								<template v-if="state.level!=0">
									<view v-if="item.initial==='0'" style="text-decoration:line-through;color:red">
										已签约</view>
									<template v-else>
										<view v-if="state.level==state.btnIndex" @tap.prevent="go(item)">去签约</view>
									</template>
								</template>

							</view>
						</view>
					</scroll-view>
				</view>

			</su-fixed>
		</view>


		

		<!-- <mapdemo v-show="state.currentTab == 3"></mapdemo> -->


		<!-- 我的团队 开始 -->
		<view class="orgBox" v-if="state.currentTab == 2"> 
			<view class="org-userBox ss-flex ">
				<image class="userBox-avatar" :src="sheep.$url.cdn(userInfo.avatar)" />
				<view class="userInfo ss-m-l-15 ss-flex-1 ss-flex-col ss-row-between">
					<view class="ss-flex">
						<view class="userInfo-name ss-flex ss-line-1">{{ userInfo.nickname }}</view>
						<!-- 是股东身份时 -->
						<template v-if="userInfo?.extend?.max_role=='shareholder'">
							<image :src="sheep.$url.cdn(giveaway[userInfo?.extend?.max_role])" style="margin-left:20rpx;margin-right:6rpx;width: 49rpx;height: 49rpx;min-width: 49rpx;"
								 v-if="(sheep.$store('user').isLogin)&&userInfo?.extend?.max_role!=='user'&&userInfo?.extend?.max_role!=='platform'"></image>
							<image
								:src="calcSrc" style="width: 49rpx;height: 49rpx;min-width: 49rpx;"
								 v-if="(sheep.$store('user').isLogin)&&userInfo?.extend?.max_role!=='user'&&userInfo?.extend?.max_role!=='platform'"></image>	
						</template>
						<!-- 是其他身份时 -->
						<template v-else>
							<image :src="sheep.$url.cdn(giveaway[userInfo?.extend?.max_role])" style="margin-left:20rpx;width: 49rpx;height: 49rpx;min-width: 49rpx;"
								 v-if="(sheep.$store('user').isLogin)&&userInfo?.extend?.max_role!=='user'&&userInfo?.extend?.max_role!=='platform'"></image>
						</template>
						
					</view>
					<view class="userInfo-joinTime">{{ timeFormat(state.user_create_time, 'yyyy年mm月dd日加入') }}</view>
				</view>
				
				<view class="my-teamer ss-flex-col ss-col-center ss-row-center ss-m-r-10" v-if="state.lowerLevel.parent" @click="gotoIm">
					<image style="width: 70rpx;height: 70rpx;border-radius: 20rpx;"
						:src="sheep.$url.cdn(state.lowerLevel.parent.avatar||'/static/icon/ptlogo.png')"
						></image>
						<view class="my-teamer-txt ss-m-t-10">我的团队长</view>
				</view>
				<!-- <view class="vipLogo ss-flex ss-row-right"
					v-if=" (sheep.$store('user').isLogin) && userInfo?.extend?.max_role !== 'user' && userInfo?.extend?.max_role !== 'platform' ">
					<image class='vipLogo-img' :src="sheep.$url.cdn(giveaway[userInfo?.extend?.max_role])" />	
					<image 
						:src="sheep.$url.cdn('/static/user/stockholder.png')"
						class="vipLogo-img" v-if="userInfo?.extend?.max_role=='shareholder'"></image>
				</view> -->
			</view>
			<!-- <org-amount :data="state.data"></org-amount> -->
			<team-amount :data="state.data"></team-amount>
			
			<!-- 我的上级 -->
			<!-- <c-org-item title="我的团队长" titleColor="#E46575" parent :data="state.lowerLevel.parent" /> -->
			<c-org-item title="我的团队" :data="state.lowerLevel.children" @set="chat" @get="getChildren('')" />
			<c-org-item title="&nbsp;B&nbsp; &nbsp; &nbsp; &nbsp;D&nbsp;" :data="state.lowerLevel.DB"
				titleColor="#127FD8" titleBGColor="#CFEAFF" @set="chat" @get="getChildren('DB')" />
			<c-org-item title="&nbsp;B&nbsp; &nbsp;D&nbsp; &nbsp;M&nbsp;" titleColor="#127FD8" titleBGColor="#CFEAFF"
				:data="state.lowerLevel.BDM" @set="chat" @get="getChildren('BDM')" />
			<c-org-item title="街道服务商" titleColor="#127FD8" titleBGColor="#CFEAFF" :data="state.lowerLevel['街道服务商']"
				@get="getChildren('街道服务商')" />
			<c-org-item title="区县服务商" titleColor="#127FD8" titleBGColor="#CFEAFF" :data="state.lowerLevel['区县服务商']"
				@get="getChildren('区县服务商')" />
			<c-org-item title="城市服务商" titleColor="#127FD8" titleBGColor="#CFEAFF" :data="state.lowerLevel['城市服务商']"
				@get="getChildren('城市服务商')" />
		</view>
		<!-- 我的团队  结束 -->


		<!-- 底部弹窗 -->
		<su-popup v-model:show="state.show_popup" position="bottom" round="20" :overlay="true" @close="close_share_popup">
			<view class="share-popup">
				<view class="share-popup__title">转发</view>
				<view class="share-popup__content ss-flex justify-around">
					<view class="share-item ss-flex-col justify-center align-center">
						<button open-type="share" class="share-button">
							<image class="share-icon wechat-icon"
								src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/8ee6ff4103e85c07d876bc140ab5700c.png"
								mode="" />
							<view class="share-text">微信好友</view>
						</button>
					</view>
					<view class="share-item ss-flex-col justify-center align-center">
						<button class="share-button" @click="handle_moments_share">
							<image class="share-icon moments-icon"
								src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/118c02ac304c0ed6fa4a7143d4f48a76.png"
								mode="" />
							<view class="share-text">朋友圈</view>
						</button>
					</view>
					<view class="share-item ss-flex-col justify-center align-center">
						<button class="share-button" @click="handle_qrcode_share">
							<image class="share-icon qrcode-icon"
								src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/f00ba47f292f2023ce527f1c6742a1fc.png"
								mode="" />
							<view class="share-text">分享二维码</view>
						</button>
					</view>
					<view class="share-item ss-flex-col justify-center align-center">
						<button class="share-button" @click="copy_code">
							<image class="share-icon qrcode-icon"
								src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/myicon/20250320/e9682e4554ff01ca1bcc554fa5dc9990.png"
								mode="" />
							<view class="share-text" @click="copy_code">复制邀请码</view>
						</button>
					</view>
				</view>
				<view class="share-popup__cancel ss-m-t-20" @click="close_share_popup">取消</view>
			</view>
		</su-popup>

		<!-- 二维码图片弹窗 -->
		<su-popup v-model:show="state.show_qrcode_popup" position="center" round="20" :overlay="true"
			@close="close_qrcode_popup">
			<view class="qrcode-popup">
				<image v-if="state.show_qrcode_popup" class="qrcode-image" :src="state.qr_code" mode="widthFix"></image>
				<div class="option_box">
					<view class="close_button" @click="close_qrcode_popup">返回</view>
					<button @tap="handleSave" class="save_picture">保存图片</button>
				</div>
			</view>
		</su-popup>
		<!-- <div class="invite_list">
			<div class="invite_item" v-for="(item, index) in state.user_list" :key="index">
				<div class="user_left">
					<div class="avatar_box">
						<image :src="item.avatar" mode="aspectFill"></image>
					</div>
					<div class="user_detail">
						<div class="user_name">{{ item.nickname }}</div>
						<div class="invite_time">邀请时间: {{ item.create_time }}</div>
						<div class="invite_time">绑定手机号: {{ item.mobile }}</div>
					</div>
				</div>
				<div class="user_tag">{{ item.role }}</div>
			</div>
		</div> -->
		<!-- </div> -->
		<!-- 邀请记录列表 end -->
		<!-- </div> -->



		<!-- 填写邀请码 -->
		<su-popup v-model:show="state.show_bind_popup" position="center" round="20" :overlay="true"
			@close="close_bing_popup">
			<view class="input-box">
				<div class="title-header">绑定上级</div>
				<div class="flex-box">
					<text>邀请码:&nbsp;</text>
					<view class="search_box">
						<input type="text" v-model="state.code" placeholder="请输入您上级的邀请码" class="search_input" />
					</view>
				</div>
				<div class="close-footer">
					<view class="close-sty foo-btn" @click="close_bing_popup">
						<view class="text-box">
							<text class="text-style">取消</text>
						</view>
					</view>
					<view class="clim-sty foo-btn" @click="cliClick">确定</view>
				</div>
			</view>
		</su-popup>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom,
		onPullDownRefresh,
		onShareAppMessage,
		onShareTimeline,
	} from '@dcloudio/uni-app';
	import assNavbar from "@/components/ass-navbar"
// #ifdef APP
import imStore from "@/im/store/im.js"
// #endif
	import cOrgItem from "./components/c-org-item"
	import {
		showAuthModal
	} from '@/sheep/hooks/useModal';
	import mapdemo from './map/echarts'
	import sheep from '@/sheep';
	import userApi from "@/sheep/api/user"
	import {
		timeFormat
	} from "@/sheep/utils/index"
	import {
		queryToParams
	} from '@/sheep/helper/index.js';
	import orgAmount from './components/org-amount.vue';
	import teamAmount from './components/team-amout.vue'
	import uniDatetimePicker from "./components/uni-datetime-picker/uni-datetime-picker.vue"
	//建议把json下载到本地 
	// import mapdata from '/static/china.json' //自己的存放路径 我这是在ucharts 实例拷下来的 下面有我的这个文件
	//引用配置文件 用于改写样式覆盖使用
	import uCharts from '@/pages/user/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js' //在uniapp 插件库下载下来就是这个路径 可以自己改
	import qiunDataCharts from '@/pages/user/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	
	const myPosition=computed(()=>sheep.$store('location').myPosition)
	const posterUrl = ref('');
	const userInfo = computed(() => sheep.$store('user').userInfo)
	const btnList = [{
			name: '地市代理',
			value: 1
		},
		{
			name: '区县代理',
			value: 2
		},
		{
			name: '街道服务商',
			value: 3
		},
	]
	const state = reactive({
		loading: false,
		posNow: null,
		cityInfo: {}, //当前定位信息
		list: [],
		oldList: [],
		areaList: [],
		level: 0, //0省 1市 2区 3街道
		btnIndex: 3, //0省 1市 2区 3街道
		allList: [
			[],
			[],
			[],
			[]
		], //省 市 区 街道
		cityName: [],
		scale: 1, // 缩放比例
		stv: {
			offsetX: 120,
			offsetY: 0,
			zoom: false, // 是否缩放
			distance: 0, // 两指距离
			scale: 1 // 缩放倍数
		},
		startX: 0,
		startY: 0,
		touchStartEvent: 0,
		//地图数据
		chartsDataMap: {
			series: []
		},
		menuTop: 80,

		qr_code: '',
		invite_code: '',
		user_list: [],
		tabs: [{
				name: '我的邀请',
				value: 0,
			},
			{
				name: '邀请记录',
				value: 1,
			},
			{
				name: '我的团队',
				value: 2,
			},
			{
				name: '我要参与',
				value: 3,
			},
		],
		lowerLevel: {
			parent: {},
			children: {},
			DB: {},
			BDM: {},
			'街道服务商': {},
			'区县服务商': {},
			'城市服务商': {},
		},
		data:{},
		user_create_time: '',
		currentTab: 0,
		show_popup: false,
		show_qrcode_popup: false,
		search_key: '',
		selected_date: '',
		show_calendar: false,
		show_bind_popup: false,
		code: '',
		total:0,
		params: {
			keyword: '',
			date: '',
		},
	});
	const config = {
		extra: {
			map: {
				mercator: true
			}
		}
	}
	
	//计算股东的另外一个徽章
	const calcSrc = computed(()=>{
		let role = '';
		if(userInfo.value?.extend?.founder==1){
			role = 'founder'
		}else if(userInfo.value?.extend?.high_partner==1){
			role = 'high_partner'
		}else if(userInfo.value?.extend?.short_partner==1){
			role = 'high_partner';
		}else if(userInfo.value?.extend?.leader==1){
			role = 'leader'
		}else if(userInfo.value?.extend?.maker==1){
			role = 'maker'
		}
		
		return sheep.$url.cdn(giveaway[role]);
	})
	
	watch(
		()=>sheep.$store('user').isLogin,
		(newValue, oldValue) => {
			get_invite();
			getTeamData()
		}
	)
	function copyCode(){
		sheep.$helper.copyText(state.invite_code);
	}
	async function getChildren(role) {
		console.log('getChildren', role)
		let {
			current_page,
			last_page
		} = state.lowerLevel[role ? role : 'children']
		if (current_page < last_page || last_page != 0) {
			let res = await userApi.org.getTeamChildren({
				list_rows: 30,
				page: current_page + 1,
				role: role
			})
			if (res.error == 0) {
				state.lowerLevel[role ? role : 'children'].current_page = res.data.current_page
				state.lowerLevel[role ? role : 'children'].per_page = res.data.per_page
				state.lowerLevel[role ? role : 'children'].direct_count = res.data.direct_count
				state.lowerLevel[role ? role : 'children'].indirect_count = res.data.indirect_count
				state.lowerLevel[role ? role : 'children'].total_count = res.data.total_count
				state.lowerLevel[role ? role : 'children'].data.push(...res.data.data)
			}
		}
	}
	//去im
	function gotoIm(){
		let to = {
			aim: 'message',
			service: {
				mobile:state.lowerLevel.parent.mobile
			}
		}
		
		uni.showToast({
			title:'即将跳转到聊天',
			icon:'none',
			duration: 200
		})
		
		setTimeout(()=>{
			// #ifdef APP
				  imStore().webQueryAnalysis(to)
				  // #endif
			// #ifndef APP
			uni.navigateTo({
				url: "/im/pages/web?to=" + encodeURIComponent(JSON.stringify(to)),
			})
			// #endif
		},100)
	}

	function go(item) {
		console.log(item)
		var arr = [null, 4, 3, 2]
		var address = state.cityName.join('')
		var street = ''
		if (state.level != 3) {
			address += item.name
		} else {
			street = item.name
		}
		sheep.$router.go('/pages/commission/giveaway/proxy', {
			type: arr[state.level],
			address,
			street
		}) //街道服务商2 区县3 城市4
	}

	// 查看下级
	async function nextArea(item) {
		if (item.is && !state.loading) { //如果还有下级
			if (state.level < state.btnIndex) {
				if (state.level == 0) { //选择城市
					state.oldList = state.list
					state.list = [item.id + '0000']
					changeColor(state.list, state.oldList)
				}
				state.cityName.push(item.name)


				state.loading = true
				const res = await sheep.$api.data.areaNext({
					pid: item.id
				})
				if (res.error == 0) {
					state.allList[state.level + 1] = res.data || []
					state.level++
					state.loading = false
				}

			}
		}
	}

	function back() {
		state.cityName.pop()
		state.allList[state.level] = []
		state.level--
	}

	function changeColor(list, oldlist, pos) {
		var series = state.chartsDataMap.series
		// 清除原有高亮
		if (oldlist.length > 0) {
			oldlist.forEach((item) => {
				var pos = series.findIndex((i, ind) => {
					return i.properties.adcode == Number(item)
				})
				if (pos > -1 && series[pos].color) {
					series[pos].color = '#2D3B56'
				}
			})
		}
		// 添加新的高亮
		list.forEach((item) => {
			var pos = series.findIndex((i, ind) => {
				return i.properties.adcode == Number(item)
			})
			if (pos > -1) {
				series[pos].color = '#55ffff'
			}
		})
		if(state.posNow!=-1){
			series[state.posNow].color = '#ff557f'
		}
		state.chartsDataMap.series = series

	}
	/* 触摸开始 */
	function touchstartCallback(e) {
		if (e.touches.length === 1) {
			let {
				clientX,
				clientY
			} = e.touches[0];
			state.startX = clientX;
			state.startY = clientY;
			state.touchStartEvent = e.touches;
		} else {
			let xMove = e.touches[1].clientX - e.touches[0].clientX;
			let yMove = e.touches[1].clientY - e.touches[0].clientY;
			let distance = Math.sqrt(xMove * xMove + yMove * yMove);
			state.stv.distance = distance;
			state.stv.zoom = true; // 缩放状态
		}
	}
	/* 触摸移动中 */
	function touchmoveCallback(e) {
		// 单指移动
		if (e.touches.length === 1) {
			if (state.stv.zoom) return; // 缩放状态，不处理单指
			let {
				clientX,
				clientY
			} = e.touches[0];
			let offsetX = clientX - state.startX;
			let offsetY = clientY - state.startY;
			state.startX = clientX;
			state.startY = clientY;
			let {
				stv
			} = state;
			stv.offsetX += offsetX;
			stv.offsetY += offsetY;
			stv.offsetLeftX = -stv.offsetX;
			stv.offsetLeftY = -stv.offsetLeftY;
			state.stv = stv;
		}
		// 双指缩放
		else {
			let xMove = e.touches[1].clientX - e.touches[0].clientX;
			let yMove = e.touches[1].clientY - e.touches[0].clientY;
			let distance = Math.sqrt(xMove * xMove + yMove * yMove);
			let distanceDiff = distance - state.stv.distance;
			let newScale = state.stv.scale + 0.005 * distanceDiff;
			state.stv.distance = distance;
			state.stv.scale = newScale;
		}
	}
	/* 触摸结束 */
	function touchendCallback(e) {
		if (e.touches.length === 0) {
			state.stv.zoom = false; // 重置缩放状态
		}
	}

	//模拟从服务器获取数据
	function getServerData() {
		uni.showLoading()
		uni.request({
			url: sheep.$url.cdn('/storage/js/china.json'), // 服务器 URL
			method: 'GET',
			success: (res) => {
				console.log('getServerData--res:', res);
				let mapseries = res.data.features.map((item) => {
					item.color = '#2D3B56';
					return item;
				});
				state.chartsDataMap.series = mapseries;
				getPos()
				uni.hideLoading()
			},
			fail: (err) => {
				console.error('请求 JSON 失败:', err);
			}
		});


	}


	const giveaway = {
		'maker': '/storage/myicon/20250324/22514d82b240593051f59f66a9a48370.png', //BD   maker
		'leader': '/storage/myicon/20250324/ef0036f44b822375f6c535157e6f92c5.png', //BDM  leader
		'short_partner': '/storage/myicon/20250324/94d8c29e55576422e5231193e8225c5e.png', //服务中心  short_partner
		'high_partner': '/storage/myicon/20250324/9e1848cbfc03f8cdf38456e698dea687.png', //区县  high_partner
		'founder': '/storage/myicon/20250324/39e5b0a6bcc9fb0c726702d663f50753.png', //地市  founder
		'shareholder':'/static/user/stockholder.png',//股东
	}
	async function scan_code() {

		if (!sheep.$store('user').isLogin) {
			showAuthModal();
			return;
		}

		uni.scanCode({
			success: async (res) => {
				let query = queryToParams(decodeURIComponent(res.path).split('?')[1]);
				if (query.invite_code) {

					const res = await sheep.$api.tuangou.bind({
						invite_code: query.invite_code,
					});

					if (res.error == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
					}
				}
			},
		});
	}

	// 邀请用户数据 start
	const invite_data = reactive([{
			user_name: '用户名称',
			invite_time: '2025-03-10 21:09',
			role_name: '创客',
		},
		{
			user_name: '用户名称',
			invite_time: '2025-03-10 21:09',
			role_name: '普通用户',
		},
		{
			user_name: '用户名称',
			invite_time: '2025-03-10 21:09',
			role_name: '团长',
		},
		{
			user_name: '用户名称',
			invite_time: '2025-03-10 21:09',
			role_name: '初级合伙人',
		},
		{
			user_name: '用户名称',
			invite_time: '2025-03-10 21:09',
			role_name: '高级合伙人',
		},
		{
			user_name: '用户名称',
			invite_time: '2025-03-10 21:09',
			role_name: '联合创始人',
		},
	]);
	// 邀请用户数据 end

	const onTabsChange = (e) => {
		state.currentTab = e.index;
		if (e.index == 3) {
			handle()

		}

	};

	// 切换地图时要做的操作
	async function handle() {
		uCharts.map = {
			"type": "map",
			"canvas2d": true,
			"background": "none",
			"animation": true,
			"timing": "easeOut",
			"duration": 1000,
			"color": ['#ff4455'],
			"padding": [
				10,
				10,
				10,
				10
			],
			"fontSize": 8,
			"errorReload": true,
			"fontSize": 6,
			"fontColor": "#fff",

			"tapLegend": true,
			"dataLabel": true,
			"extra": {
				"map": {
					"border": true,
					"mercator": false,
					"borderWidth": 1,
					"borderColor": "#16effa",
					"fillOpacity": 0.6,
					"activeBorderColor": "#16effa",
					"activeFillColor": "#2D3B56", //设置 鼠标 悬停 地图展示的背景颜色
					"activeFillOpacity": 1
				},
				"tooltip": {
					"showBox": false,
					"showArrow": true,
					"showCategory": false,
					"borderWidth": 0,
					"borderRadius": 0,
					"borderColor": "#000000",
					"borderOpacity": 0.7,
					"bgColor": "#000000",
					"bgOpacity": 0.7,
					"gridType": "solid",
					"dashLength": 4,
					"gridColor": "#fff",
					"fontColor": "#FFFFFF",
					"splitLine": true,
					"horizentalLine": false,
					"xAxisLabel": false,
					"yAxisLabel": false,
					"labelBgColor": "#FFFFFF",
					"labelBgOpacity": 0.7,
					"labelFontColor": "#fff"
				}
			}
		}
		if (state.chartsDataMap.series.length == 0) {
			//模拟从服务器获取数据
			await getServerData()
		}


	}
	// 选择右边按钮
	function changeBtn(item) {
		state.btnIndex = item.value
		if (state.level > item.value) {
			state.level = item.value
			while (state.cityName.length > item.value) {
				state.cityName.pop()
			}
		}
	}


	// 显示分享弹窗
	const show_share = () => {
		if (!sheep.$store('user').isLogin) {
			showAuthModal();
			return;
		}
		state.show_popup = true;
	};

	const show_bind = () => {
		if (!sheep.$store('user').isLogin) {
			showAuthModal();
			return;
		}
		state.show_bind_popup = true;
	};


	// 关闭分享弹窗
	const close_share_popup = () => {
		state.show_popup = false;
	};
	async function getTeamData() {
		let res = await userApi.org.getUserTeam()
		if (res.error == 0) {
			console.log('getTeamData:',res.data);
			state.data = res.data;
			state.user_create_time = res.data.user[0].create_time
			state.lowerLevel = res.data
		}
	}

	function close_bing_popup() {
		state.code = '';
		state.show_bind_popup = false;
	}
	async function cliClick() {
		if (state.code == '') {
			uni.showToast({
				title: '请输入邀请码',
				icon: 'none',
			});
		} else {
			const params = {
				invite_code: state.code,
			};
			const res = await sheep.$api.tuangou.bind(params);
			setTimeout(() => {
				uni.showToast({
					icon: res.error != 0 ? 'none' : '',
					title: res.msg,
				});
			}, 100);
			if (res.error == 0) {
				state.show_bind_popup = false;
				state.code = '';
				get_invite();
			}
		}
	}

	async function bind() {
		if (state.code == '') {
			uni.showToast({
				title: '请输入邀请码',
				icon: 'none',
			});
		}
		const res = await sheep.$api.user.userBind({
			invite_code: state.code
		});
		uni.showToast({
			title: res.msg,
		});
	}

	// 微信好友分享
	const handle_wechat_share = () => {
		// 微信好友分享逻辑
		// uni.showToast({
		//   title: '微信好友分享',
		//   icon: 'none',
		// });
		close_share_popup();
	};

	// 朋友圈分享
	const handle_moments_share = () => {
		// 朋友圈分享逻辑
		uni.showToast({
			title: '请点击右上角选择复制链接分享朋友圈',
			icon: 'none',
		});
		close_share_popup();
	};

	// 二维码分享
	const handle_qrcode_share = () => {
		// 关闭分享弹窗
		close_share_popup();
		// 显示二维码弹窗
		state.show_qrcode_popup = true;
	};

	// 关闭二维码弹窗
	const close_qrcode_popup = () => {
		state.show_qrcode_popup = false;
	};
	const handleSave = async () => {
		uni
			.downloadFile({
				url: posterUrl.value,
				success: (sres) => {
					uni.saveImageToPhotosAlbum({
						filePath: sres.tempFilePath,
						success: (res) => {
							sheep.$helper.toast('保存成功');
						},
						fail: (err) => {
							sheep.$helper.toast('保存失败');
						},
					});
				},
			})
			.onProgressUpdate((res) => {
				uni.showLoading({
					title: '正在保存...',
				});
				if (res.progress == 100) {
					uni.hideLoading();
				}
			});
	};

	// 分享给朋友的回调
	onShareAppMessage(() => {
		return {
			title: '分享',
			path: '/pages/index/home?invite_code=' + state.invite_code,
			imageUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/67eaf80805de0e0d23b6011970091ae7.png',
		};
	});
	onShareTimeline(() => {
		return {
			title: '分享',
			query: 'invite_code=' + state.invite_code,
		};
	});
	// 复制邀请码
	function copy_code() {
		const content = state.invite_code;
		uni.setClipboardData({
			data: content,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
				});
			},
			fail: function() {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
				});
			},
		});
	}

	function get_invite() {
		// 登录成功后，重新获取邀请码
		sheep.$api.tuangou.getUserQrCode().then((res) => {
			if (res.error == 0) {
				state.qr_code = res.data.path;
				posterUrl.value = res.data.path;
				state.invite_code = res.data.invite_code;
			}
		});

		// 获取邀请列表
		sheep.$api.tuangou.invite({
			page_size: 100
		}).then((res) => {
			if (res.error == 0) {
				state.user_list = res.data.data;
				state.total = res.data.total
			}
		});
	}

	onLoad(async (option) => {
		// 缓存邀请码
		console.log(option);


		if (option.invite_code) {
			let invite_code = option.invite_code;
			uni.setStorageSync('invite_code', invite_code);
		}

		if (!sheep.$store('user').isLogin) {
			showAuthModal();
			return;
		} else {
			get_invite();
			getTeamData()
		}

		// // 获取胶囊按钮位置信息
		// const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// // 胶囊按钮上边框距离屏幕顶部的距离(px)
		// state.menuTop = menuButtonInfo.top; 

		const response = await sheep.$api.data.areaNew()
		state.allList[state.level] = response.data


	});

	function chat(e) {
		console.log('e:-----', e);
		let to = {
			aim: 'message',
			// service.mobile 必传 
			service: {
				mobile: e.data.mobile
			}
		}
		// #ifdef APP
			  imStore().webQueryAnalysis(to)
			  // #endif
		// #ifndef APP
		uni.navigateTo({
			url: "/im/pages/web?to=" + encodeURIComponent(JSON.stringify(to)),
		})
		// #endif
	}

	// 返回按钮点击事件
	const handle_back = () => {
		// 获取当前页面栈
		const pages = getCurrentPages();
		// 如果页面栈只有一个页面，说明没有上一层，直接跳转到首页
		if (pages.length <= 1) {
			uni.switchTab({
				url: '/pages/index/home',
			});
		} else {
			// 有上一层页面，正常返回
			uni.navigateBack({
				delta: 1,
			});
		}
	};

	// 添加搜索方法
	const handleSearch = () => {
		const beginDate = state.dateRange && state.dateRange.length > 0 ? state.dateRange[0] : '';
		const endDate = state.dateRange && state.dateRange.length > 1 ? state.dateRange[1] : '';

		const params = {
			page_size: 100,
			keyword: state.search_key,
			begin_date: beginDate,
			end_date: endDate,
		};

		sheep.$api.tuangou.invite(params).then((res) => {
			if (res.error == 0) {
				state.user_list = res.data.data;
				state.total = res.data.total;
			}
		});
	};

	const onDateChange = () => {
		handleSearch();
	};

	// 修改日历显示方法
	const show_calendar = () => {
		// 临时解决方案，因为uni.showDatePicker不存在
		uni.showToast({
			title: '请选择日期',
			icon: 'none',
		});

		// 这里可以后续集成第三方日历组件
		// 例如使用 uni-datetime-picker 组件
		// 或者使用原生的 picker 组件

		// 模拟选择日期后的操作
		// state.params.date = '2023-05-15';
		// handleSearch();
	};
	const DEFAULT_LOCATION = {
		latitude: 30.308041, // 默认坐标
		longitude: 120.372893,
		city_name: "杭州市",
		pid: 33
	};
	const getLocation = () => {
		uni.getLocation({
			type: "wgs84",
			success(res) {
				const {
					latitude,
					longitude
				} = res;
				getCityName(latitude, longitude);
			},
			fail(err) {
				console.error("定位失败:", err);
				// 定位失败时使用默认坐标
				state.cityInfo = DEFAULT_LOCATION
				uni.showToast({
					title: "定位失败",
					icon: "none",
					duration: 2000,
				});
			},
		});
	};
	const getCityName = (latitude, longitude) => {
		sheep.$api.data
			.getcity({
				latitude: latitude,
				longitude: longitude,
			})
			.then((res) => {
				if (res.error === 0) {
					state.pos
					state.cityInfo = res.data
					const location = {
						latitude: latitude,
						longitude: longitude,
						city_name: res.data.name || DEFAULT_LOCATION.city_name,
						pid: res.data.pid || DEFAULT_LOCATION.pid,
					};

					state.city = {
						...location
					};
					uni.setStorageSync("location", JSON.stringify(location));

					getPosIndex()
				}
			});
	};
	// 获取当前位置的省份index并修改颜色

	// 获取当前位置
	async function getPos() {
		
		if (myPosition.value.latitude&&myPosition.value.longitude) {
			await getCityName(myPosition.value.latitude, myPosition.value.longitude);
		}else{
			await getLocation()
		}

	}

	function getPosIndex() {
		var posNow = state.cityInfo.pid + '0000'
		var series = state.chartsDataMap.series
		state.posNow = series.findIndex((i, ind) => {
			return i.properties.adcode == Number(posNow)
		})
		if(state.posNow!=-1){
			series[state.posNow].color = '#ff557f'
		}
	}
</script>

<style lang="less" scoped>
	.option_box {
		display: flex;
		justify-content: center;

		.save_picture {
			width: 290rpx;
			height: 96rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			font-size: 28rpx;
			margin-left: 80rpx;
			background: linear-gradient(288deg, #05d5bf 0%, #06c2ae 50%, #a2cefd 100%);
			border: none;
			color: #fff;
			box-sizing: border-box;
		}

		.close_button {
			width: 290rpx;
			height: 96rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			font-size: 28rpx;
			border: 4rpx solid #d8d8d8;
			box-sizing: border-box;
		}
	}

	.orgBox {
		.org-userBox {
			padding: 15rpx 45rpx 15rpx 35rpx;

			.userBox-avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}

			.userInfo {
				height: 100rpx;
				
				.userInfo-name {
					font-family: Source Han Sans;
					font-size: 32rpx;
					font-weight: 500;
					line-height: normal;
					letter-spacing: normal;
					color: #000000;
				}

				.userInfo-joinTime {
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: normal;
					color: #787878;
				}
			}

			.vipLogo {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50rpx;
			}
			.my-teamer{
				
				.my-teamer-txt{
					height: 26rpx;
					font-family: Source Han Sans;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 118.45%;
					text-align: center;
					letter-spacing: normal;
					color: #E46575;
				}
			}
		}
	}

	.input-box {
		padding: 32rpx 36rpx;

		.title-header {
			color: #333333;
			font-size: 40rpx;
		}

		.close-footer {
			display: flex;
			justify-content: space-between;

			.foo-btn {
				width: 304rpx;
				height: 82rpx;
				border-radius: 100rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.close-sty {
				background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
				display: flex;
				justify-content: center;
				align-items: center;

				.text-box {
					background-color: #fff;
					width: 300rpx;
					height: 78rpx;
					border-radius: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.text-style {
					font-variation-settings: 'opsz' auto;
					background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-fill-color: transparent;
					font-size: 32rpx;
				}
			}

			.clim-sty {
				background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
			}
		}

		.flex-box {
			display: flex;
			align-items: center;
			margin-top: 50rpx;
			margin-bottom: 80rpx;
		}

		.search_box {
			flex: 1;
			height: 60rpx;
			background: #f5f5f5;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			padding: 5rpx 10rpx 5rpx 20rpx;
			margin-right: 20rpx;

			// margin-top: 50rpx;
			.search_icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			.search_input {
				flex: 1;
				height: 100%;
				font-size: 26rpx;
				background: transparent;
			}

			.search_btn {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 22rpx;
				color: #ffffff;
				background: #0559a7;
				border-radius: 32rpx;
				padding: 0 25rpx;
			}
		}
	}

	.page {
		background-color: #fff;
		// padding-bottom: 100rpx;
		min-height: 100vh;
	}

	image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.custom_tabs {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		position: sticky;
		top: 0;
		z-index: 99;

		.tab_item {
			position: relative;
			padding: 0 40rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;

			&.active {
				color: #333;
				font-weight: 500;
			}

			.tab_line {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 6rpx;
				background: #0559a7;
				border-radius: 2rpx;
			}
		}
	}

	.tip {
		background-color: #fff;
		font-size: 20rpx;
		line-height: 1.5;
		padding: 20rpx 15rpx 20rpx;
		border-radius: 0 0 10rpx 10rpx;
		// margin: 10rpx;
	}

	.qr_code {
		box-sizing: border-box;
		width: 750rpx;
		position: relative;

		.qr_text {
			color: #353535;
			position: absolute;
			z-index: 2;
			font-weight: 700;
			font-size: 32rpx;
			left: 360rpx;
			top:985rpx;
			font-weight:bold;
		}

		.qr_code_img {
			// border: 1rpx solid red;
			width: 400rpx;
			height: 400rpx;
			position: absolute;
			z-index: 2;
			left: 180rpx;
			top: 550rpx;
		}

		.bgi {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
	}

	// 分享弹窗样式
	.share-popup {
		padding: 30rpx;
		background-color: #fff;

		&__title {
			font-size: 32rpx;
			text-align: center;
			color: #333;
			margin-bottom: 40rpx;
		}

		&__content {
			padding: 20rpx 0;
		}

		&__cancel {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333;
			border-top: 1rpx solid #eee;
		}

		.share-item {
			padding: 10rpx;

			.share-button {
				background: transparent;
				border: none;
				padding: 0;
				margin: 0;
				line-height: normal;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&::after {
					border: none;
				}
			}

			.share-icon {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 20rpx;
			}

			.wechat-icon {
				// background-color: #07c160; // 微信绿色
			}

			.qrcode-icon {
				// background-color: #1e90ff; // 二维码蓝色
			}

			.share-text {
				font-size: 28rpx;
				color: #333;
				margin-top: 10rpx;
			}
		}
	}

	// 二维码弹窗样式
	.qrcode-popup {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.qrcode-image {
			width: 500rpx;
			height: auto;
			display: block;
		}

		&__close {
			margin-top: 30rpx;
			padding: 20rpx 60rpx;
			background-color: #f5f5f5;
			color: #333;
			font-size: 28rpx;
			border-radius: 40rpx;
		}
	}

		// 固定底部按钮样式
		.fixed-bottom-btn {
			height: 80px;
			box-sizing: content-box;
			
	
			.btn-container {
				box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
				position: absolute;
				top: 1350rpx;
				left: 0;
				right: 0;
				z-index: 100;
				padding: 30rpx 10rpx 50rpx;
				display: flex;
				justify-content: space-around;
				
			}
	
			.share-btn {
				opacity:0;
				font-family: 'Alimama ShuHeiTi';
				width: 220rpx;
				height: 140rpx;
				border-radius: 10rpx;
				text-align: center;
				background: #FFA93A;
				// background: red;
				color: #fff;
				font-size:40rpx;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
				
				
			}
	
			.manual-ding {}
	
			.invite-ding {
				background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
			}
		}

	// 邀请记录列表样式 start
	.invite_container {
		padding: 30rpx;
		background-color: #fff;

		.invite_header {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		.search_filter {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.search_box {
				flex: 1;
				height: 60rpx;
				background: #f5f5f5;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				padding: 5rpx 10rpx 5rpx 20rpx;
				margin-right: 20rpx;

				.search_icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}

				.search_input {
					flex: 1;
					height: 100%;
					font-size: 26rpx;
					background: transparent;
				}

				.search_btn {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 22rpx;
					color: #ffffff;
					background: #0559a7;
					border-radius: 32rpx;
					padding: 0 25rpx;
				}
			}

			.date_filter {
				display: flex;
				align-items: center;
				height: 64rpx;
				border-radius: 32rpx;

				.calendar_icon {
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 26rpx;
					color: #666;
				}
			}
		}

		.invite_list {
			.invite_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				.user_left {
					display: flex;
					align-items: center;

					.avatar_box {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						background-color: #f0f0f0;
						overflow: hidden;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.user_detail {
						.user_name {
							width: 300rpx;
							font-size: 28rpx;
							color: #333;
							margin-bottom: 8rpx;
							white-space: nowrap;
							overflow: hidden;           
							text-overflow: ellipsis;
						}

						.invite_time {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.user_tag {
					font-size: 24rpx;
					color: #333;
					background-color: #f5f5f5;
					padding: 6rpx 20rpx;
					border-radius: 30rpx;
				}
			}
		}
	}

	// 邀请记录列表样式 end

	// 顶部导航栏样式
	.nav_bar {
		// height: 88rpx;
		width: 100%;
		background-color: #ffffff;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;

		.nav_content {
			// height: 88rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			position: relative;

			.back_btn {
				width: 48rpx;
				height: 48rpx;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}
		}
	}

	.bind_codebind_code {
		height: 432rpx;
		display: flex;
		flex-direction: column;
		padding: 18rpx 20rpx 0 16rpx;
		border-radius: 20rpx;
		background: #ffffff;

		.bind_title {
			height: 38rpx;
			font-family: Source Han Sans;
			font-size: 40rpx;
			font-weight: 500;
			line-height: 38rpx;
			letter-spacing: -2rpx;
			color: #333333;
		}

		.code-txt {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-content: center;
			margin-top: 20rpx;

			.invite-txt {
				font-size: 32rpx;
			}

			.invite-input {
				font-size: 32rpx;
				border: 1px solid #ccc;
				border-radius: 10rpx;
				padding: 10rpx;
			}
		}

		.btn-groups {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-content: center;
			margin-top: 40rpx;
		}
	}





	view {
		box-sizing: border-box
	}

	.main {
		overflow-x: hidden !important;
		;
		-webkit-overflow-scrolling: auto;
		/* 禁用iOS弹性滚动 */
		height: 100vh;
		width: 100vw;
		background: #363050;
		position: relative;

		.charts-box {
			width: 100vw;
			height: 1000rpx;
			box-sizing: border-box;
			z-index: 100;
			position: absolute;
			left: -300rpx;
			top: -100rpx;
			transform: scale(1.3);

		}

		// .mapPos{
		// 	z-index:100;
		// 	position:absolute;
		// 	left:-1000rpx;
		// 	top:300rpx;
		// 	transform: scale(1.3);

		// }
	}

	.box-bottom {
		width: 100vw;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 25rpx 16rpx 100rpx 16rpx;
		background: #435B8B;
		font-size: 30rpx;
		color: #fff;
		z-index: 999;

		.scroll-view {
			height: 600rpx;
			border-radius: 30rpx;
			background: #2D3B56;
		}

		.scroll-box {
			padding: 20rpx 41rpx;

			.scroll-item {
				padding: 12rpx 0;
				border-bottom: 2rpx solid #D8D8D8;
				margin-bottom: 10rpx;
			}
		}

	}

	.btn {
		height: 50rpx;
		background: #2D3B56;
		color: #fff;
		border-radius: 25rpx;
		border: 2rpx solid #55ffff;
		width: 200rpx;
		margin-bottom: 30rpx;
	}

	.btn-act {
		background-color: #55ffff;
		color: #465d87
	}
</style>